<template>
    <div class="logintim">
        <div class="login jue scjz">
            <h1 class="jue shuijz">进销存管理系统</h1>
            <div class="shuru jue scjz">
                <el-form ref="loginform" :rules="rules" :model="form" label-width="80px">
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="form.username">
                            <template #prefix>
                                <i class="el-icon-user"></i>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="form.password" show-password>
                            <template #prefix>
                                <i class="el-icon-unlock"></i>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="yanzm" class="xiang">
                        <el-input class="kuan" v-model="form.captcha">
                            <template #prefix>
                                <i class="el-icon-key"></i>
                            </template>
                        </el-input>
                        <img class="jue chuijz canvas" :src="result" alt="">
                    </el-form-item>
                </el-form>
            </div>
            <div class="login-but jue shuijz">
                <el-button size="medium" type="primary" @click="show()">登录</el-button>
                <el-button size="medium" type="danger">重置</el-button>
            </div>
        </div>
    </div>
</template>
  
<script>
import { Yanzm, Login } from '@/api/dashboard'

export default {
    data() {
        return {
            form: {
                captcha: '',
                checkKey: '',
                username: 'admin',
                password: '123456',
                remember_me: true

            },
            rules: {
                username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                yanzm: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
            },
            show_num: [],
            // 验证码
            result: '',
        }
    },
    mounted() {
        this.yanzm()
    },
    methods: {
        async yanzm() {
            var shijian = Math.floor(Date.now() / 1000)
            var sanweishu = Math.floor(Math.random() * 900) + 100
            var chanzhi = shijian.toString() + sanweishu.toString()
            this.form.checkKey = chanzhi
            console.log(chanzhi, shijian)
            let res = await Yanzm(chanzhi, shijian)
            console.log(res)
            this.result = res.result
        },



        // login() {
        //     // 将验证码转换为小写
        //     // 获取验证码数字的字符串表示
        //     const num = this.show_num.join('')
        //     // 检查验证码是否为空
        //     if (val === '') {
        //         this.$message.error('请输入验证码！')
        //         // 检查验证码是否与生成的数字匹配
        //     } else if (val === num) {
        //         // 调用 show() 方法进行下一步操作
        //         this.show()
        //         // 重置表单
        //         this.resetForm()
        //     } else {
        //         // 显示验证码错误消息并重置表单
        //         this.$message.error('验证码错误！请重新输入！')
        //         this.resetForm()
        //     }
        // },

        async show() {
            // 打印用户名和密码
            console.log(this.form.username, this.form.password)
            try {
                // 调用 Login 函数处理登录请求
                let res = await Login(this.form)
                console.log(res)
                // console.log(res.jwt_token)
                sessionStorage.setItem('token', res.result.token)
                this.$router.push('/')
                // sessionStorage.setItem('oldPwd', this.form.password)
                // this.$router.push('/')
                // this.$message.success('登录成功')
                // 处理响应
            } catch (error) {
                // 打印登录错误信息
                this.$message.error('账号或密码错误！')
                // 处理登录错误
            }
        },

        resetForm() {
            // 重置表单字段
            this.$refs.loginform.resetFields()
            // 重置验证码字段为空
            this.form.yanzm = ''
            // 重新绘制验证码
            this.draw(this.show_num)
        }
    }
}
</script>
<style lang="less" scoped>
.logintim {
    background: url(http://property.byesame.com/img/bg2.10d6517d.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: relative;

    .login {
        background-color: #ffffffc6;
        width: 600px;
        height: 400px;
        border-radius: 10px;
        box-shadow: 0px 0px 20px 2px #65666dc4;

        h1 {
            width: 100%;
            text-align: center;
            top: 30px;
        }

        .shuru {
            width: 90%;
            left: 48.5%;

            .el-form {
                width: 90%;
                margin: 0 auto;
                margin-top: 26px;
            }

            .kuan {
                width: 64%;
            }

            .canvas {
                display: inline-block;
                width: 36%;
                height: 96%;
                background-color: aqua;
            }
        }

        .login-but {
            bottom: 20px;

            // el-button {
            //     width: 124px;
            //     height: 34px;
            // }
        }

    }
}
</style>
  